<div
  class="accessory-box"
  [ngClass]="{
    'accessory-on': 'Active' in service.values
      ? service.values.Active
      : ('CurrentMediaState' in service.values ? [0, 1].includes(service.values.CurrentMediaState) : 'Mute' in service.values && 'Volume' in service.values ? !service.values.Mute && service.values.Volume > 0 : 'Mute' in service.values && !service.values.Mute),
    'paused': 'CurrentMediaState' in service.values && service.values.CurrentMediaState === 1,
  }"
  (longClick)="onLongClick()"
  (shortClick)="onClick()"
  tabindex="0"
>
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.doorbell' | translate" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- outer casing -->
        <rect x="6" y="1" width="18" height="30" rx="3" stroke="#7f7f7f" fill="none" stroke-width="2" />
        <!-- power button -->
        <circle cx="15" cy="16" r="5" stroke="#7f7f7f" stroke-width="2" fill="#1976d2" fill-opacity="0.5" />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    @if ('CurrentMediaState' in service.values) {
    <div class="accessory-label grey-text">
      @switch (service.values.CurrentMediaState) { @case (0) { {{ 'accessories.control.play' | translate }} } @case (1)
      { {{ 'accessories.control.pause' | translate }} } @case (2) { {{ 'accessories.control.stop' | translate }} }} @if
      ('Mute' in service.values && service.values.Mute) { &middot; {{ 'accessories.control.mute' | translate }} } @else
      { @if ('Volume' in service.values) { &middot; {{ service.values.Volume }}% } }
    </div>
    } @else if ('Active' in service.values && !service.values.Active) {
    <div class="accessory-label grey-text" [innerText]="'accessories.control.off' | translate"></div>
    } @else if ('Mute' in service.values && service.values.Mute) {
    <div class="accessory-label grey-text" [innerText]="'accessories.control.mute' | translate"></div>
    } @else if ('Volume' in service.values) {
    <div class="accessory-label grey-text">{{ service.values.Volume }}%</div>
    } @else if (['Speaker', 'SmartSpeaker'].includes(service.customType || service.type)) {
    <div class="accessory-label grey-text">{{ 'accessories.control.on' | translate }}</div>
    } @else {
    <div class="accessory-label grey-text">{{ 'accessories.core.doorbell' | translate }}</div>
    }
  </div>
</div>
